<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.fade.js"></script>
    <style>body {margin: 0;}</style>
</head>

<body>
    <canvas id="app"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            fullScreen: true
        });
        $app.start();
        $app.setMaxFps(40);

        var $above, $below;
        var imgIndex = 0;
        var imgList = [
            'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/btn.png',
        ];
        var fadeTypes = window.Easycanvas.Sprite.prototype.fade.types;

        $above = new Easycanvas.Sprite({
            name: 'init',
            content: {
                img: imgList[imgIndex % imgList.length],
            },
            style: {
                locate: 'lt',
                zIndex: 1,
                width: document.body.clientWidth,
                height: document.body.clientHeight
            },
        });
        $app.add($above);

        var once = function () {
            imgIndex++;
            $above
                .fade({
                    // type: 'rotate',
                    type: fadeTypes[Math.floor(Math.random() * 100) % fadeTypes.length],
                    // subtype: 4,
                    subtype: imgIndex % 4 + 1,
                    ticks: 20,
                })
                .then(function () {
                    this.remove();
                    once();
                });

            $below = new Easycanvas.Sprite({
                name: 'added',
                content: {
                    img: imgList[imgIndex % imgList.length],
                },
                style: {
                    locate: 'lt',
                    zIndex: $above.style.zIndex - 1,
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                },
            });
            $app.add($below);
            $above = $below;
        };

        setTimeout(once, 1000);
    </script>
</body>

